<template>
	<view class="index" :style="{'height':windowHeight}">
		<view class="home-swipt">
			<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
				:duration="duration">
				<swiper-item>
					<view class="swiper-item uni-bg-red">
						<view class="swipt-img">
							<image src="/static/wwww1.jpg" mode=""></image>
						</view>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item uni-bg-red">
						<view class="swipt-img">
							<image src="/static/wwww2.jpg" mode=""></image>
						</view>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item uni-bg-red">
						<view class="swipt-img">
							<image src="/static/qqqq2.jpg" mode=""></image>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>

		<view class="home-head">
			<view class="home-heads">
				<view class="heads-txt">设备号:{{sn}}</view>
				<view class="heads-img" @click="Copy">
					<image src="/static/fz.png" mode=""></image>
				</view>
			</view>
		</view>

		<view class="home-head" v-for="(item,index) in jhFlowMeasureList" :key="index">
			<view class="head-tc">{{item.thaliName}}</view>
			<view class="head-hz">
				<view class="head-hz-li">
					<view class="head-hz-li-num">{{balance}}元</view>
					<view class="head-hz-li-txt">账户余额</view>
				</view>
				<view class="head-hz-li">
					<view class="head-hz-li-num">{{item.surplusFlowText}}</view>
					<view class="head-hz-li-txt">剩余流量</view>
				</view>
				<view class="head-hz-li">
					<view class="head-hz-li-num">{{item.usedFlowText}}</view>
					<view class="head-hz-li-txt">已用流量</view>
				</view>
			</view>
			<view class="head-time">套餐到期日期:{{item.endDate}}</view>
		</view>

		<view class="home-head" style="display: flex;">
			<view class="home-kfimg">
				<image src="/static/index/xl.png" mode=""></image>
			</view>
			<view class="home-kfTxt">
				<view class="kfTxrt-top">在线客服</view>
				<view class="kfTxrt-btm">需要帮助?请联系我们</view>
			</view>
		</view>


		<view class="home-head" style="display: flex;flex-wrap: wrap;
justify-content:space-between;">
			<view class="list" @click="TaoCan">
				<view class="list-img">
					<image src="/static/index/qq1.png" mode=""></image>
				</view>
				<view class="list-txt">套餐订购</view>
			</view>
			<view class="list" @click="CaoZuo">
				<view class="list-img">
					<image src="/static/index/qq1.png" mode=""></image>
				</view>
				<view class="list-txt">设备操作</view>
			</view>
			<view class="list" @click="Recharge">
				<view class="list-img">
					<image src="/static/index/qq2.png" mode=""></image>
				</view>
				<view class="list-txt">余额订购</view>
			</view>
			<view class="list" @click="authentication">
				<view class="list-img">
					<image src="/static/index/qq3.png" mode=""></image>
				</view>
				<view class="list-txt">实名认证</view>
			</view>
			<view class="list" @click="agent">
				<view class="list-img">
					<image src="/static/index/qq4.png" mode=""></image>
				</view>
				<view class="list-txt">成为代理</view>
			</view>
			<view class="list" @click="binding">
				<view class="list-img">
					<image src="/static/index/qq5.png" mode=""></image>
				</view>
				<view class="list-txt">绑定手机</view>
			</view>
			<view class="list" @click="coupon">
				<view class="list-img">
					<image src="/static/index/qq6.png" mode=""></image>
				</view>
				<view class="list-txt">优惠券</view>
			</view>
			<view class="list" @click="MeiRi">
				<view class="list-img">
					<image src="/static/index/qq7.png" mode=""></image>
				</view>
				<view class="list-txt">每日用量</view>
			</view>
			<view class="list" @click="details">
				<view class="list-img">
					<image src="/static/index/qq8.png" mode=""></image>
				</view>
				<view class="list-txt">套餐详情</view>
			</view>
			<view class="list" @click="LiuShui">
				<view class="list-img">
					<image src="/static/index/qq9.png" mode=""></image>
				</view>
				<view class="list-txt">账户流水</view>
			</view>
			<view class="list" @click="TouSu">
				<view class="list-img">
					<image src="/static/index/qq10.png" mode=""></image>
				</view>
				<view class="list-txt">投诉建议</view>
			</view>
			<view class="list" @click="backend">
				<view class="list-img">
					<image src="/static/index/qq12.png" mode=""></image>
				</view>
				<view class="list-txt">192后台</view>
			</view>
			<view class="list" @click="Login">
				<view class="list-img">
					<image src="/static/index/qq11.png" mode=""></image>
				</view>
				<view class="list-txt">退出登录</view>
			</view>
		</view>

		<clothes></clothes>
		<!-- 实名 -->
		<uni-popup ref="popup" background-color="#fff" borderRadius="10rpx">
			<view style="width: 500rpx;border-radius: 15rpx;padding: 20rpx 30rpx;z-index: 999;background: #fff;">
				<view style="text-align: center;padding-top: 10rpx;font-size: 32rpx;font-weight: 600;">通知</view>
				<view style="font-size: 28rpx;padding-top: 20rpx;">您当前还没有实名认证，请您前往实名认证!</view>
				<view style="display: flex;flex-wrap: nowrap;justify-content:space-between;padding-top: 20rpx;">
					<view style="width: 45%;border: 2rpx solid #eee;text-align: center;height: 70rpx;border-radius: 10rpx;line-height: 70rpx;font-size: 26rpx;" @click="ZanBu">暂不实名</view>
					<view style="width: 45%;border: 2rpx solid #eee;text-align: center;height: 70rpx;border-radius: 10rpx;line-height: 70rpx;font-size: 26rpx;background: #409EFF;color: #fff;" @click="ShiMing">前往实名</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>
<script>
	export default {
		components: {},
		data() {
			return {
				windowHeight: "200px",

				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,

				sn: '', //设备号
				iccid: '89860623390001009474', //设备卡号
				MSISDN: '861400290715177',
				
				userId:'',	//用户ID
				
				deviceId:'',	//用户登录设备id
				jhFlowMeasureList:[],	//套餐
				balance:'',	//账户余额
			}
		},
		onLoad() {
			this.GaoDu() //判断手机高度
			this.queryAuth()	//设备号获取用户信息
			
			
			// 判断有没有实名
			this.$REQ(this.$api.driverOrderlist, {
				orderType: this.status
			}, 'get').then(res => {
				console.log(res)
			}).catch(err => {
				console.log(err)
			})
		},
		onShow() {
			const value = uni.getStorageSync('info');
			this.userId = value.userId
			this.queryAccountBalance()	//查询账户余额信息
			this.jhFlowMeasure()	//查询套餐流量使用情况
			this.code()	//获取code
			
			
			const iponeInfo = uni.getStorageSync('iponeInfo');
			this.sn = iponeInfo.deviceNo
			// 校验是否已实名
			this.$REQ(this.$api.jhRealName, {
				sn: iponeInfo.deviceNo,
				iccid: this.iccid,
			}, 'POST').then(res => {
				console.log(res)
				this.$refs.popup.open()
				// 实名的画就查询设备卡
			}).catch(err => {
				console.log(err)
			})
		},
		
		
		methods: {
			
			// 获取CODE
			code(){
				this.$REQ(this.$api.qrconnect, {
					sn: value.deviceNo,
				}, 'POST').then(res => {
					console.log(res)
					this.jhFlowMeasureList = res.data.data
				}).catch(err => {
					console.log(err)
				})
			},
			
			
			
			
			
			
			// 查询套餐流量使用情况
			jhFlowMeasure(){
				const value = uni.getStorageSync('iponeInfo');
				this.$REQ(this.$api.jhFlowMeasure, {
					sn: value.deviceNo,
				}, 'POST').then(res => {
					console.log(res)
					this.jhFlowMeasureList = res.data.data
				}).catch(err => {
					console.log(err)
				})
			},
			// 设备号获取用户信息
			queryAuth(){
				const value = uni.getStorageSync('iponeInfo');
				this.$REQ(this.$api.queryAuth, {
					deviceId: value.deviceId,
					deviceNo:value.deviceNo,
				}, 'POST').then(res => {
					console.log(res)
				}).catch(err => {
					console.log(err)
				})
			},
			// 查询账户余额信息
			queryAccountBalance(){
				this.$REQ(this.$api.queryAccountBalance, {
					userId: this.userId,
				}, 'POST').then(res => {
					console.log(res)
					this.balance = res.data.data.balance
				}).catch(err => {
					console.log(err)
				})
			},
			// 暂不实名
			ZanBu(){
				this.$refs.popup.close()
			},
			// 实名
			ShiMing(){
				uni.navigateTo({
					url: '/pages/index/authentication'
				});
			}, 
			// 套餐订购
			TaoCan() {

				uni.navigateTo({
					url: '/pages/loT/index/setMenu'
				});
				// uni.navigateTo({
				// 	url: '/pages/index/setMenu'
				// });
			},
			
			
			// 投诉建议
			TouSu() {

				uni.navigateTo({
					url: '/pages/index/complaint'
				});
			},
			
			// 设备操作
			CaoZuo() {
			
				uni.navigateTo({
					url: '/pages/index/operate'
				});
			},
			
			//账户流水 
			LiuShui() {

				uni.navigateTo({
					url: '/pages/index/flowing'
				});
			},
			// 每日用量
			MeiRi() {
				uni.navigateTo({
					url: '/pages/index/MeiRi'
				});
			},
			// 优惠券
			coupon() {
				uni.navigateTo({
					url: '/pages/index/coupon'
				});
			},

			// 余额充值
			Recharge() {
				uni.navigateTo({
					url: '/pages/index/Recharge'
				});
			},
			// 绑定手机
			binding() {

				uni.showModal({
					title: '提示',
					content: '您当前已经绑定了手机号，是否确认更换',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
				// return
				uni.navigateTo({
					url: '/pages/index/binding'
				});
			},
			// 套餐详情
			details() {
				uni.navigateTo({
					url: '/pages/index/details'
				});
			},
			// 成为代理
			agent() {
				uni.navigateTo({
					url: '/pages/index/agent'
				});
			},
			// 实名认证
			authentication() {

				// this.$REQ(this.$api.jhRealName, {
				// 	sn: this.sn,
				// 	iccid: this.iccid,
				// }, 'POST').then(res => {
				// 	console.log(res)
				// }).catch(err => {
				// 	console.log(err)
				// })

				// return
				uni.navigateTo({
					url: '/pages/index/authentication'
				});
			},
			// 192后台
			backend() {
				uni.navigateTo({
					url: '/pages/index/backend'
				});
			},

			Login() {
				uni.reLaunch({
					url: '/pages/login/Carmine'
				});
			},
			Copy() {
				uni.setClipboardData({
					data: '123123123123', // 需要复制的内容
					success: () => {
						// 成功提示框显示 1 秒钟
						uni.showToast({
							title: '复制成功',
							icon: 'none',
							duration: 1000
						});
					},
					fail: () => {
						// 失败提示框显示 1 秒钟
						uni.showToast({
							title: '复制失败，请重试',
							icon: 'none',
							duration: 1000
						});
					}
				});
			},
			// 判断手机高度
			GaoDu() {
				console.log('12356')
				// 判断手机页面的高度
				uni.getSystemInfo({

					success: (res) => {
						this.windowHeight = res.windowHeight + "px";
					}
				})
			},
			changeIndicatorDots(e) {
				this.indicatorDots = !this.indicatorDots
			},
			changeAutoplay(e) {
				this.autoplay = !this.autoplay
			},
			intervalChange(e) {
				this.interval = e.target.value
			},
			durationChange(e) {
				this.duration = e.target.value
			},
		}
	}
</script>

<style scoped lang="less">
	.index {
		width: 100%;
		height: 100%;
		background: #ECF4FF;
	}

	.uni-margin-wrap {
		width: 690rpx;
		width: 100%;
	}

	.swiper {
		height: 350rpx;
	}

	.swiper-item {
		display: block;
		height: 350rpx;
		line-height: 350rpx;
		text-align: center;
	}

	.swiper-list {
		margin-top: 40rpx;
		margin-bottom: 0;
	}

	.uni-common-mt {
		margin-top: 60rpx;
		position: relative;
	}

	.info {
		position: absolute;
		right: 20rpx;
	}

	.uni-padding-wrap {
		width: 550rpx;
		padding: 0 100rpx;
	}

	.uni-swiper .uni-swiper-dot-active {
		background: #ffffff
	}

	.home-swipt {}

	.swipt-img {
		width: 100%;
		height: 400rpx;
	}

	.swipt-img image {
		width: 100%;
		height: 100%;
	}

	.home-head {
		margin: 25rpx;
		background: #ffffff;
		border-radius: 20rpx;
		box-shadow: 0px 0px 6px -2px #888889;
	}

	.home-heads {
		display: flex;
		padding: 25rpx 30rpx;

	}

	.heads-txt {
		font-size: 28rpx;
		line-height: 45rpx;
	}

	.heads-img {
		width: 45rpx;
		height: 45rpx;
		padding-left: 20rpx;
	}

	.heads-img image {
		width: 100%;
		height: 100%;
	}

	.head-tc {
		padding-left: 30rpx;
		border-bottom: 3rpx solid #EAEEF1;
		padding-top: 25rpx;
		padding-bottom: 10rpx;
	}

	.head-hz {
		display: flex;
		flex-wrap: nowrap;
		justify-content: space-between;
	}

	.head-hz-li {
		width: 33.333%;
	}

	.head-hz-li-num {
		width: 100%;
		text-align: center;
		font-size: 32rpx;
		font-weight: 600;
		padding-top: 20rpx;
		padding-bottom: 10rpx;
	}

	.head-hz-li-txt {
		font-size: 32rpx;
		color: #9A9DA2;
		text-align: center;
		width: 100%;
	}

	.head-time {
		font-size: 28rpx;
		color: #75787D;
		padding: 30rpx;
	}

	.home-kfimg {
		padding: 25rpx 40rpx;
		width: 80rpx;
		height: 80rpx;
	}

	.home-kfimg image {
		width: 100%;
		height: 100%;
		border-radius: 100rpx;
	}

	.home-kfTxt {
		font-size: 32rpx;
	}

	.kfTxrt-top {
		padding-top: 20rpx;
		font-size: 30rpx;
		font-weight: 600;
	}

	.kfTxrt-btm {
		padding-top: 8rpx;
		font-size: 30rpx;
		color: #4C548D;
	}

	.list {
		width: 25%;
	}

	.list-img {
		width: 60rpx;
		height: 60rpx;
		padding-top: 15rpx;
		padding-bottom: 15rpx;
		margin: auto;
	}

	.list-img image {
		width: 100%;
		height: 100%;
	}

	.list-txt {
		font-size: 30rpx;
		color: #27459F;
		text-align: center;
		padding-bottom: 20rpx;
	}
</style>